<template>
    <NCard>

        <NThing>
            <template #header>
                <!-- 我也不想选染成button，但我找不到合适的方法让图标居中 qaq -->
                <n-button text color="black">
                    <template #icon>
                        <n-icon>
                            <Detail></Detail>
                        </n-icon>
                    </template>
                    <strong>问答详情</strong>
                </n-button>
            </template>
            <template #header-extra>
                <NButton strong secondary @click="emit('close')"><strong>关闭</strong></NButton>
            </template>
            <Question
                :data="{ realname: data?.author?.name || '', nickname: data?.author?.nickname || '', avatar: imgurl + data?.author?.avatar, date: data?.date || 0, text: data?.content || '' }">
            </Question>
            <template #footer>
                <NSpace vertical>
                    <NCard embedded v-for="(answer) in answerList">
                        <Answer :data="answer"></Answer>
                    </NCard>
                </NSpace>
            </template>
            <template #action>
                <NSpace vertical>
                    <n-input v-model:value="textareaValue" type="textarea" maxlength="1000" show-count
                        placeholder="请输入你的回答" />
                    <NButton type="success" @click="handlePostAnswer(data?._id)">提交回答</NButton>
                </NSpace>
            </template>
        </NThing>
    </NCard>
</template>

<style>
.n-thing-main {
    width: 100%
}
</style>

<script setup lang="ts">
import { NCard, NInput, NThing, NButton, NSpace, NIcon } from "naive-ui";
import { ref, watch } from "vue";
import { AppsListDetail24Regular as Detail } from "@vicons/fluent";
import Answer from "@/components/Answer.vue";
import Question from "@/components/Question.vue";
import qaUtils from "@/api/qa";

const emit = defineEmits(['showDetail', 'close']);


const props = defineProps(["data"]);


const textareaValue = ref("")


const answerList = ref([] as Array<{}>);


const imgurl = window.apiurl + "avatar/";


watch(props, (newVal, oldVal) => {
    qaUtils.listAnswers(newVal.data._id).then((data) => {
        answerList.value.length = 0;
        answerList.value.push(...data);
    }).catch((error) => {
        console.log(error);
    })
}, { immediate: true })


function handlePostAnswer(_id: string) {
    qaUtils.postAnswers(textareaValue.value, _id).then(() => {
        window.$utils.message.success("回答成功!");
    }).catch((err) => {
        console.log(err);
        window.$utils.message.error("回答失败：", err);
    })
}

</script>